import {addPmManager, deletePmManager, selectPmRoleType} from '@/api/manager'
import {CCard} from '@/components/card'
import {CnMediumSpan} from '@/components/text'
import {useTableLoading} from '@/hooks/tableHook'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {getDDUsers} from '@/libs/dingding'
import {defineComponent, computed, reactive, watch, onMounted} from 'vue'

export default defineComponent({
  setup(props, ctx) {
    const {store, router} = useGlobalAPI()
    const loginUserInfo = computed(() => store.getters['dingding/ddUserInfo'])
    const {loading, startLoading, closeLoading} = useTableLoading()

    let state = reactive<{dataSource: User.RoleUser[]}>({
      dataSource: []
    })

    const columns: CColumn<User.RoleUser>[] = [
      {
        title: '名字',
        dataIndex: 'userDDName'
      },
      {
        title: '操作',
        dataIndex: 'utils',
        width: 120,
        customRender({record}) {
          return (
            <div class='flex items-center gap-x-8'>
              <a-popconfirm
                title='确认解除此人的子管理员权限吗？'
                ok-text='是'
                cancel-text='否'
                onConfirm={() => {
                  deletePmManager({userDDId: record.userDdId}).finally(() => {
                    getTableData()
                  })
                }}
              >
                <a-button type='text' danger>
                  删除
                </a-button>
              </a-popconfirm>
            </div>
          )
        }
      }
    ]
    watch(
      () => loginUserInfo.value,
      n => {
        console.log(n.roleLevel)

        if (n.roleLevel !== 1) {
          router.push('/')
        }
      },
      {
        immediate: true
      }
    )

    function getTableData() {
      startLoading()
      selectPmRoleType({userDDId: loginUserInfo.value.userId})
        .then(res => {
          state.dataSource = res.data.filter(item => item.pmRoleCode === '0014')[0].pmRoleUserList
          closeLoading()
        })
        .catch(err => {
          closeLoading()
        })
    }

    onMounted(() => {
      if (loginUserInfo.value.roleLevel === 1) {
        getTableData()
      }
    })

    return () => (
      <div>
        <CCard
          title='子管理员表格'
          v-slots={{
            title: () => (
              <div class='flex items-center justify-between'>
                <CnMediumSpan class="text-14">子管理员表格</CnMediumSpan>
                <a-button
                  class=' bg-primary text-white'
                  type='primary'
                  onClick={() => {
                    getDDUsers({
                      multiple: false
                    })
                      .then(res => {
                        if (res !== 'cancel') {
                          addPmManager({
                            userDDId: res.map((item: any) => item.emplId).join('')
                          })
                            .then(res => {
                              getTableData()
                            })
                            .catch(err => {})
                        }
                      })
                      .catch(err => {})
                  }}
                >
                  添加子管理员
                </a-button>
              </div>
            )
          }}
        >
          <a-table dataSource={state.dataSource} columns={columns} rowClassName="text-12"></a-table>
        </CCard>
      </div>
    )
  }
})
